<template>
	<div class="Qyou">
		<div class="Qyou-top">
			<span class="iconfont a1">&#xe699;</span>
			<label class="Qyou-til">猜你喜欢</label>
		</div>
			<ul class="like-list">
				<li class="list-item" v-for="(item,index) in yyy" :key="index">
					<div class="left">
						<img :src="item.hotURL" >
					</div>
					
					<div class="right">
						<h5>{{item.hotTil}}</h5>
						<p class="msg">
							<span class="iconfont">&#xe812;&#xe812;&#xe812;&#xe812;&#xe812;</span>
							<label>{{item.pl}}条评论</label>
						</p>
						<aside>
							<span>￥<i>{{item.price}}</i></span>起
							<label>{{item.didian}}</label>
						</aside>
					</div>
				</li>
			</ul>
	</div>
</template>

<script>
	export default {
		props:['yyy'],
		data(){
			return{
				// yyy :[
				// 	{hotURL:require('@/assets/img/hot01.jpg') ,didian:'广州长隆', hotTil:'长隆野生动物世界',pl:'155609', price:'250'},
				// 	{hotURL:require('@/assets/img/hot02.jpg') ,didian:'广州长隆', hotTil:'长隆欢乐世界',pl:'83133',price:'210.9'},
				// 	{hotURL:require('@/assets/img/hot03.jpg') ,didian:'海珠区', hotTil:'广州塔', pl:'47241',price:'125'},
				// 	{hotURL:require('@/assets/img/hot04.jpg') ,didian:'海珠区', hotTil:'海珠国家湿地公园',pl:'2951', price:'19'},
				// 	{hotURL:require('@/assets/img/hot05.jpg') ,didian:'广州长隆', hotTil:'长隆国际大马戏剧院',pl:'47241', price:'297.6'},
				// 	{hotURL:require('@/assets/img/hot06.jpg') ,didian:'天河区', hotTil:'珠江夜游',pl:'21789', price:'68'},
				// 	{hotURL:require('@/assets/img/hot07.jpg') ,didian:'南沙区', hotTil:'天适樱花悠乐园',pl:'36', price:'250'},
				// 	{hotURL:require('@/assets/img/hot08.jpg') ,didian:'广州长隆', hotTil:'广州长隆旅游度假区', pl:'66356',price:'84.3'},
				// 	{hotURL:require('@/assets/img/hot09.jpg') ,didian:'广州融创', hotTil:'广州融创雪世界', pl:'7590',price:'104'},
				//     {hotURL:require('@/assets/img/hot10.jpg') ,didian:'河区', hotTil:'广州正佳极地海洋世界', pl:'17694',price:'115'},
				// ]
			}
		}
	}
</script>

<style>
	.Qyou{
		/* width: 100%; */
		margin-top: 0.4rem;
		background-color: white;
		font-size: 0.28rem;
		
	}
	.Qyou-top{
		padding: 0.4rem;
		
	}
	.Qyou-til{
		font-weight: bold;
	}
	.a1{
		color: #FF4500;
		font-size: 0.6rem;
		margin-right: 0.2rem;
	}

	.list-item{
		width: 100%;
		overflow: hidden;
		border-bottom: 1px solid #cccccc;
	}
	.like-list{
		padding: 0.3rem 0.2rem;
	}
	.left ,.right{
		float: left;
	}
	.left{
		width: 2rem;
		height: 2rem;
		padding: 0.2rem;
	}
	.left img{
		width: 100%;
		height: 100%;
	}
	.right{
		margin-top: 0.2rem;
		margin-bottom: 0.2rem;
		width: 65%;
	}
	.right h5{
		font-size: 0.36rem;
	}
	.right .msg{
		margin: 0.4rem 0;
	}
	.right .msg .iconfont{
		color: #f7f700;
		margin-right: 0.1rem;
		
	}
	.right aside span{
		color: darkorange;
	}
	.right aside span i{
		font-size: 0.36rem;
		font-style: normal;
	}
	.right aside label{
		float: right;
	}
</style>
